<%@ page import="database.CourseDb" %>
<%@ page import="database.Course" %>
<%@ page import="java.util.List" %>
<%@ page import="utils.StringUtils" %>
<%@ page import="java.text.DateFormat" %>
<%@ page import="java.text.SimpleDateFormat" %><%--
  Created by IntelliJ IDEA.
  User: jimmyhsu
  Date: 2016/12/19
  Time: 2:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生选课</title>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link href="../../static/css/bootstrap.css" rel="stylesheet">
    <style>
        .bottom-bar{
            width:100%;
            height:30px;
            position: absolute;
            bottom: 0;
        }
    </style>
    <%
        DateFormat format = new SimpleDateFormat("MM-dd HH:mm");
    %>
</head>
<body>
<%@include file="checkStudentLogin.jsp"%>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#" style="color: #1abc9c;">青马班</a>
        <ul class="nav">
            <li><a href="signIn.jsp">签到</a></li>
            <li class="active"><a href="#">课程</a></li>
            <li><a href="comment.jsp">评价</a></li>
        </ul>
    </div>
</div>
<table class="table">
    <%
        String studentId = (String) request.getSession().getAttribute("username");
        List<Course> allCourses = CourseDb.selectAllCourses();
        for (Course course : allCourses) {
            if (!CourseDb.isUserInCourse(studentId, course.getId())) {
    %>
    <tr class="success">
        <td><%=course.getName()%></td>
        <td><%=format.format(course.getDatetime())%></td>
        <td><%=CourseDb.getStudentNumberInCourse(course.getId())+"/"+course.getMaxNumber()%></td>
        <td><a href="studentSelectCourse?studentId=<%=studentId%>&courseId=<%=course.getId()%>&type=select">选课</a> </td>
    </tr>
    <%
            } else {
    %>
    <tr class="info">
        <td><%=course.getName()%></td>
        <td><%=format.format(course.getDatetime())%></td>
        <td><%=CourseDb.getStudentNumberInCourse(course.getId())+"/"+course.getMaxNumber()%></td>
        <td><a onclick="quitClass('<%=studentId%>', <%=course.getId()%>)"
                href="javascript:void(0);">退课</a> </td>
    </tr>
    <%
            }
        }
    %>
</table>
<div class="bottom-bar">
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav pull-right">
                <li><a href="#"><%=studentId%></a></li>
                <li><a href="studentLogout">注销</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Modal -->
<div id="quitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="quitModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">退出原因...</h3>
    </div>
    <div class="modal-body">
        <div id="banner"></div>
        <textarea style="width: 100%;" rows="3" name="quitReason" oninput="inputCheck(this.value)" placeholder="提供退课原因以让我们继续改进"></textarea>
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
        <a href="javascript:void(0);" onclick="doQuit()" class="btn" id="submit">提交</a>
    </div>
</div>
<form id="form" method="get" action="studentSelectCourse">
    <input type="hidden" name="studentId" id="studentId">
    <input type="hidden" name="courseId" id="courseId">
    <input type="hidden" name="type" id="type" value="quit">
    <input type="hidden" name="quitReason" id="quitReason">
</form>
<%@include file="footer.jsp"%>
<script src="../../static/js/jquery-1.10.2.js"></script>
<script src="../../static/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
    function showBanner() {
        document.getElementById("banner").innerHTML="\<div class=\"alert\"\> <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\<strong\>提示\<\/strong\> 请填写理由\<\/div\>";
    }
    function quitClass(studentId, courseId) {
        $('#quitModal').modal('show');
        $('#studentId').val(studentId);
        $('#courseId').val(courseId);
    }

    function inputCheck(val) {
        var text = $.trim(val);
        if (text.length > 0) {
            $('#submit').attr("class", "btn btn-primary");
        } else {
            $('#submit').attr("class", "btn");
        }
        $('#quitReason').val(text);
    }
    function doQuit() {
        var reason = $('#quitReason').val();
        if ($.trim(reason) == '') {
            showBanner();
        } else {
            $('#form').submit();
        }
    }
</script>
</html>
